<template>
	<el-form ref="ruleFormRef" :model="data" status-icon :rules="rules" label-width="0px" class="ruleForm">
		<el-form-item class="animation1" prop="username">
			<el-input v-model="data.username" clearable type="text" autocomplete="off" maxlength="11" :placeholder="$t('system.account')">
				<template #prefix>
					<el-icon size="18">
						<component :is="'User'"></component>
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="animation2" prop="code">
			<div class="code">
				<el-input v-model="data.code" clearable maxlength="4" :placeholder="$t('error.code')">
					<template #prefix>
						<el-icon size="18">
							<component :is="'Clock'"></component>
						</el-icon>
					</template>
				</el-input>
				<el-button type="default">{{ $t('system.getCode') }}</el-button>
			</div>
		</el-form-item>
		<el-form-item class="animation3">
			<el-checkbox v-model="data.select">{{ $t('system.remember') }}</el-checkbox>
		</el-form-item>
		<el-form-item class="animation4">
			<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('system.login') }}</el-button>
		</el-form-item>
		<el-form-item class="animation5">
			<el-button type="default" @click="change('user')">{{ $t('system.back') }}</el-button>
		</el-form-item>
	</el-form>
</template>
<script setup lang="ts">
import { Login } from '@/types/data';
import type { FormInstance, FormRules } from 'element-plus';
import { verifyUser, verifyCode } from './verify';
const ruleFormRef = ref<FormInstance>();
const data: Login = reactive({
	username: '',
	code: '',
	select: false,
});
const rules = reactive<FormRules<typeof data>>({
	username: [{ validator: verifyUser, trigger: 'blur' }],
	code: [{ validator: verifyCode, trigger: 'blur' }],
});

const emit = defineEmits(['change']);
/**
 * @description: 切换登录方式
 * @param {string} value
 */
const change = (value: string) => {
	emit('change', value);
};
/**
 * @description: 登录
 * @param {FormInstance} formEl
 * @return {*}
 */
const submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!');
		}
	});
};
</script>
<style lang="scss" scoped>
@import '@/styles/transition.scss';

.ruleForm {
	margin-top: 20px;

	.el-input {
		--el-input-border-radius: 0;

		:deep(.el-input__wrapper) {
			padding: 5px 0;
			box-shadow: 0 1px 0 0 #dcdfe6;
		}

		:deep(.el-input__wrapper.is-focus) {
			box-shadow: 0 1px 0 0 #409eff;

			.el-icon {
				color: #409eff;
			}
		}

		:deep(.el-input__wrapper:hover) {
			box-shadow: 0 1px 0 0 #409eff;
		}
	}

	.code {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.el-button {
			border-radius: 4px;
			width: 111px;
			margin-left: 20px;
		}
	}

	.el-button {
		width: 80%;
		height: 40px;
		margin: 0 auto;
		border-radius: 30px;
	}
}

@for $i from 1 through 5 {
	.animation#{$i} {
		opacity: 0;
		animation-name: error-num;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
		animation-delay: calc($i/10) + s;
	}
}
</style>
